<template>
  <div class="container-outer">
    <div class="screen-show">
      <navTopbar></navTopbar>
      <Carousel> </Carousel>
      <Intrudction v-if="type" :typeDate="type"></Intrudction>
      <MoreInfo v-if="content.length == content_spliceNum" :contentDate="content"></MoreInfo>
      <Stores></Stores>
      <!-- <div class="container-sm">100% wide until small breakpoint</div>
      <div class="container-md">100% wide until medium breakpoint</div>
      <div class="container-lg">100% wide until large breakpoint</div>
      <div class="container-xl">100% wide until extra large breakpoint</div> -->
      <!-- <div class="container-xxl">100% wide until extra extra large breakpoint</div> -->
    </div>

  </div>
</template>
<script setup lang="ts">
import navTopbar from '@/views/nav_topbar.vue'
import Carousel from '@/views/carousel.vue'
import Intrudction from '@/views/intrudction.vue'
import MoreInfo from '@/views/moroInfo.vue'
import Stores from '@/views/stores.vue'
import { onMounted, ref } from 'vue'

import { apiReau } from '@/apis/caes'
const type = ref<any>([])
const content = ref<any>([])
const content_spliceNum = 6
const get_date = async () => {
  let res: any = await apiReau()
  type.value = res.type
  content.value = res.content.splice(-content_spliceNum).reverse()
}
get_date()


</script>
<style lang="scss">
.container-outer {
  height: 100vh;
  width: 10 0vw;
  // background-color: aquamarine;
  overflow: auto;

  // .screen-show {
  // background-color: blueviolet;
  // }
}

@media only screen and (max-width:990px) {

  .container-outer {
    background-color: rgb(0, 107, 201);

    .black-square {
      display: none !important;
    }

  }
}
</style>
